<template>
  <div class="member-checkout-page xtx-wrapper">
    <div class="container">
      <xtx-bread :parents="[{ path: '/cart', name: '购物车' }]">填写订单</xtx-bread>
      <div class="checkout-wrapper">
        <!-- 收货地址 -->
        <h3 class="checkout-item-title">收货地址</h3>
        <div class="checkout-item-body">
          <checkout-address></checkout-address>
        </div>
        <!-- 商品信息 -->
        <h3 class="checkout-item-title">商品信息</h3>
        <div class="checkout-item-body">
          <checkout-goods></checkout-goods>
        </div>
        <!-- 配送时间 -->
        <h3 class="checkout-item-title">配送时间</h3>
        <div class="checkout-item-body">
          <a class="btn active" href="javascript:;">不限送货时间：周一至周日</a>
          <a class="btn" href="javascript:;">工作日送货：周一至周五</a>
          <a class="btn" href="javascript:;">双休日、假日送货：周六至周日</a>
        </div>
        <!-- 支付方式 -->
        <h3 class="checkout-item-title">支付方式</h3>
        <div class="checkout-item-body">
          <a class="btn active" href="javascript:;">在线支付</a>
          <a class="btn" href="javascript:;">货到付款</a>
          <span style="color:#999">货到付款需付5元手续费</span>
        </div>
        <!-- 金额明细 -->
        <h3 class="checkout-item-title">金额明细</h3>
        <div class="checkout-item-body">
          <div class="total">
            <dl>
              <dt>商品件数：</dt>
              <dd>5件</dd>
            </dl>
            <dl>
              <dt>商品总价：</dt>
              <dd>¥5697.00</dd>
            </dl>
            <dl>
              <dt>运<i></i>费：</dt>
              <dd>¥0.00</dd>
            </dl>
            <dl>
              <dt>应付总额：</dt>
              <dd class="price">¥5697.00</dd>
            </dl>
          </div>
        </div>
        <!-- 提交订单 -->
        <div class="submit-box">
          <xtx-button @click="createOrder">提交订单</xtx-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CheckoutAddress from './components/checkout-address'
import CheckoutGoods from './components/checkout-goods'
export default {
  name: 'member-checkout-page',
  components: {
    CheckoutAddress,
    CheckoutGoods
  },
  methods: {
    createOrder () {
      this.$router.push('/member/pay')
    }
  }
}
</script>

<style scoped lang='less'>
.checkout-wrapper {
  background-color: #fff;
  overflow: hidden;
  .checkout-item{
    &-title {
      line-height: 70px;
      height: 70px;
      font-size: 16px;
      font-weight: normal;
      margin: 0 20px;
      padding: 0 10px;
      border-bottom: 1px solid #f5f5f5;
    }
    &-body {
      padding: 20px;
      .btn {
        width: 228px;
        height: 50px;
        border: 1px solid #e4e4e4;
        text-align: center;
        line-height: 48px;
        margin-right: 25px;
        color: #666666;
        display: inline-block;
        &.active,&:hover {
          border-color: @xtxColor;
        }
      }
      .total {
        dl {
          display: flex;
          justify-content: flex-end;
          line-height: 50px;
          dt {
            i {
              display: inline-block;
              width: 2em;
            }
          }
          dd {
            width: 240px;
            text-align: right;
            padding-right: 70px;
            &.price {
              font-size: 20px;
              color: @priceColor;
            }
          }
        }
      }
    }
  }
  .submit-box {
    text-align: right;
    border-top: 1px solid #f5f5f5;
    padding: 40px 70px 40px 0;
    margin: 0 20px;
  }
}
</style>
